<template>
<!-- 区域页面 -->
  <div>
       <!-- 顶部的蓝色导航 -->
    <uni-nav-bar  title="区域筛选" class="navbar" backgroundColor="#1482f5" statusBar="true" color="white">
        <view slot="left">
        <text class="iconfont icon-left" @click="yback"></text>
        </view>
    </uni-nav-bar>

        <!-- 筛选部分 -->
    <div class="screening">
        <div class="screeningleft">
            <span style="color: #ff9900;">区域<span class="iconfont icon-iconfontarrowup" style="font-size: 10px;color: #9999;"></span></span>
            <span   @click="yclickprice">均价<span class="iconfont icon-iconfontarrowup" style="font-size: 10px;color: #9999;"></span></span>
            <span @click="yclickhousemodel">户型<span class="iconfont icon-iconfontarrowup" style="font-size: 10px;color: #9999;"></span></span>
            <span @click="yclickchoose">筛选<span class="iconfont icon-iconfontarrowup" style="font-size: 10px;color: #9999;"></span></span>
        </div>
        <div class="screeningright">
            <span class="iconfont icon-paixu" style="font-size:18px;"></span>
        </div>
    </div>
    <!-- 筛选条件 -->
  <van-tree-select
  :items="items"
  :main-active-index="mainActiveIndex"
  :active-id="activeId"
  @click-nav="onClickNav"
  @click-item="onClickItem"
/>
<van-button type="danger" @click="ok">确认</van-button>
  </div>
</template>

<script>
import {getarea} from "../../services"
import {uniNavBar} from '@dcloudio/uni-ui';
export default {
components: {uniNavBar},
data() {
    return {
        mainActiveIndex: 0,
        activeId: [],
        items:[]
    }
},
methods: {
  // 返回
  yback(){
     wx.navigateBack()
  },
  // 点击均价
    yclickprice(){
       wx.redirectTo({
                url:"/pages/yprice/index"
            })
    },
      // 点击筛选
    yclickchoose(){
         wx.redirectTo({
                url:"/pages/ychoose/index"
            })
    },
    // 点击户型
    yclickhousemodel(){
        wx.redirectTo({
                url:"/pages/yhousemodel/index"
            })
    },
    // 点击确认按钮
    ok(){
      wx.navigateBack()
    },
    // 分类选择左侧的点击
    onClickNav( {detail={}} ) {
    this.mainActiveIndex=detail.index;
  },
  // 分类选择右侧的点击
   onClickItem({ detail = {} }) {
    const activeId = this.activeId;
    const index = activeId.indexOf(detail.id);
    if (index > -1) {
      activeId.splice(index, 1);
    } else {
      activeId.push(detail.id);
    }
    this.activeId=activeId;
  },
},
// 请求并修改数据
async created() {
    let date=await getarea()
    date.data.map(item=>{
      item.text=item.name;
      item.sqlist.map(item1=>{
        item1.text=item1.name;
      })
      item.children=item.sqlist;
     return item
    })
    this.items=date.data;
},
}
</script>

<style lang="scss">
 @import "../../y_icon/iconfont.css";
 .van-tree-select{
   height: 430px !important;
 }
 /* 筛选部分的样式 */
.screening{
    display: flex;
    height: 30px;
    align-items: center;
    border-bottom: 1px solid #000;
    .screeningright{
        width: 50px;
        text-align:center;
    }
    .screeningleft{
        width: calc(100% - 50px);
        display: flex;
        justify-content: space-around;
    }
}

.van-button{
  width: 100% !important;
}
</style>